<template>
    <div>
      <div class="sort">
        <ul>

          <li @click="click1()" ref="click1" class="first"><a href="###" ref="clicka1">推荐</a></li>
          <li v-for="(item, index) in List" :key="item.index"
          :class="{active:index==isShow}"
          @click="click(index)">
            <a href="###" :class="{active:index==isShow}">{{item.class}}</a>
          </li>
          
        </ul>
      </div>

      <div class="banner"></div>
    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import {EventBus} from '../../../../static/js/eventBus'
export default {
  name: 'sort',
  data () {
    return {
      List: [
        {class: "HTML"},
        {class: "CSS"},
        {class: "JAVASCRIPT"},
        {class: "ES6"},
        {class: "NODE.JS"},
        {class: "VUE.JS"},
        {class: "JAVA"},
        {class: "PYTHON"},
        {class: "C"},
        {class: "C++"},
        {class: "PHP"},
        {class: "WEB"},
        {class: "JQUERY"},
        {class: "AJAX"},
        {class: "DOM"},
        {class: "XML"},
        {class: ".NET"},
        {class: "JAVAWEB"},
        {class: "ELEMENT"},
        {class: "UI"},
        {class: "PS"},
      ],

      isShow: -1,
      alllist: [],
      list: [],
    }
  },

  methods: {
    click (index) {
      this.isShow = index
      this.list = []

      this.$refs.click1.style.backgroundColor = "#fff"
      this.$refs.clicka1.style.color = "#333"

      let postData = qs.stringify({
        page: 1,
      })

      axios.post(`/api/blogs`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.alllist = response.data
          // console.log(this.alllist)
          for (var i = 0; i < this.alllist.length; i++) {
            if (this.alllist[i].blog.clazz == this.List[index].class) {
              this.list.push(this.alllist[i])
            }
          }
          EventBus.$emit('sortlist',this.list);
          // console.log(this.list)
        } 

      }) 
    },
    click1 () {
      this.$refs.click1.style.backgroundColor = "#eee"
      this.$refs.clicka1.style.color = "#26a2ff"

      this.isShow = -1

      this.list = []

      let postData = qs.stringify({
        option: 0,
        page: 1,
      })

      axios.post(`/api/recommend`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.list = response.data
          EventBus.$emit('sortlist',this.list);
        } 

      })
    },

  },

  mounted () {
    var window_height = document.documentElement.clientHeight
    var slider_bar = document.querySelector('.sort');
    var banner = document.querySelector('.banner');
    var bannerTop = banner.offsetTop; // 页面被卷去头部的大小:banner距页面顶部的距离
    // var slider_bar_top = slider_bar.offsetTop - bannerTop; // 变成固定定位之后的位置
    var distance =(slider_bar.clientHeight - window_height) * 2
    // console.log(distance)
    // console.log(bannerTop);
    // console.log(slider_bar.clientHeight)
    // console.log(window_height)

    // 页面滚动事件
    document.addEventListener('scroll', function () {
      // console.log('srcoll');
      // 当页面滚动到banner时，就把侧边栏改为固定定位
      // 距离就是banner距离页面顶部的高度 banner.scrollTop
      if (window.pageYOffset >= distance) {
          slider_bar.style.position = 'fixed';
          // slider_bar.style.top = slider_bar_top + 'px';
          slider_bar.style.top = -distance + 'px';
      } else {
          slider_bar.style.position = 'absolute';
          slider_bar.style.top = '0px';
      }
    })

  },

}
</script>

<style lang="stylus" scoped>
.sort
  width 15%
  height auto
  margin-top 5rem
  margin-left 1%
  margin-bottom 1rem
  border 1px #ccc solid
  border-radius 10px
  box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
  background-color #fff
  ul
    padding-top 2.4rem
    padding-bottom 2rem
    // background-color red
    li
      margin-top .2rem
      line-height 2rem
      text-align center
      // background-color #fff
    li:hover
      background-color #eee
    .first
      background-color #eee
      a
        color #26a2ff
    .active
      background-color #eee
      color #26a2ff
</style>
